<template>
  <div>
    <van-cell
      center
      title-style="padding-left: 16px;color: #101010; font-size: 14px;"
      title="商品动态"
      is-link
      :to="{ path: '/material/home'}"
      v-if="isDirector && userLevel==2"
    />
    <van-row class="material">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="item in materialList" :key="item.value" :title="item.label">
          <template slot="title">
            <van-row>
              <van-col class="user_avatar">
                <img
                  width="40px"
                  height="40px"
                  src="@/assets/images/logo.jpg"
                  class="avert"
                  @click="navigationTo"
                />
              </van-col>
              <van-col style="width: calc(100% - 40px);">
                <div style="padding-left:12px;">
                  <span style="display: block;font-size: 16px;" @click="navigationTo">小涂</span>
                  <span style="color: gray;font-size: 12px;">{{ item.addTime }}</span>
                  <div style="font-size: 16px;">{{item.title}}</div>
                  <fold
                    :text="item.content"
                    :line="3"
                    :foldKey="item.id"
                    v-if="item.displayWay == 0"
                  ></fold>
                </div>
                <div style="padding-left:12px; overflow: hidden;" v-if="item.displayWay == 0">
                  <van-grid
                    :column-num="item.num"
                    :square="getSquare(item.num)"
                    v-bind:class="{squareClass3 : item.num == 1, squareClass6: item.num == 2}"
                    :border="false"
                  >
                    <van-grid-item
                      style="overflow: hidden;"
                      v-for="(itemx, index) in item.imgs"
                      :key="itemx.id"
                    >
                      <van-image :src="itemx" fit="scale-down" @click="preImges(item.imgs, index)" />
                    </van-grid-item>
                  </van-grid>
                </div>
                <van-row
                  v-if="item.displayWay == 1"
                  class="wz_out"
                  type="flex"
                  align="center"
                  @click="toUrl(item.url)"
                >
                  <div style="padding: 4px 4px 1px 4px;display:inline">
                    <van-image width="40px" height="40px" :src="getSrc(item.imgs)" />
                  </div>
                  <div style="padding: 4px 0;display:inline;">
                    <span>{{item.content}}</span>
                  </div>
                </van-row>
              </van-col>
            </van-row>
          </template>
        </van-cell>
      </van-list>
    </van-row>
  </div>
</template>

<script>
import { List, Row, Col, Image, Grid, GridItem, ImagePreview } from 'vant';
import { getMaterialList, listByTagId,authInfo } from '@/api/api';
import fold from '@/components/fold/';
import { saveAs } from 'file-saver';

export default {
  name: 'discovery',
  props: {
    type: [String, Number]
  },
  data() {
    return {
      mList: [],
      list: [],
      loading: false,
      finished: false,
      materialList: [],
      num: 2,
      materialTitle: '',
      page: 0,
      isDirector: false,
      userLevel:0
    };
  },

  components: {
    [List.name]: List,
    [Row.name]: Row,
    [Col.name]: Col,
    [Image.name]: Image,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [ImagePreview.name]: ImagePreview,
    [fold.name]: fold
  },

  created() {this.init()},

  methods: {
    navigationTo: function() {
      this.$router.push({ path: '/items' });
    },
    getSquare: function(num) {
      if (num == 1) {
        return false;
      }
      return true;
    },
    toUrl: function(url) {
      //console.log("===" + url);
      if (url.indexOf('http') != -1) {
        window.location.href = url;
        return;
      }
      this.$router.push({ path: url });
    },
    getSrc: function(imgs) {
      return imgs != null ? imgs[0] : '@/assets/images/logo.jpg';
    },
    async init() {
      await authInfo().then(res=>{
        this.userLevel=res.data.data.userLevel || 0
      }).then(_=>{
        if (this.userLevel==2) {
          this.page = 0;
          this.materialList = [];
          this.onLoad();
        }
      })
    },
    onLoad() {
      this.getPlatMaterial();
    },
    preImges: function(imgs, index) {
      //console.log(JSON.stringify(imgs));
      ImagePreview({
        images: imgs,
        startPosition: index,
        onClose() {
          // do something
        }
      });
    },
    getPlatMaterial() {
      this.page++;
      getMaterialList({
        type: 1,
        sort: 'add_time',
        order: 'desc',
        page: this.page
      }).then(res => {
        this.loading = false;
        this.finished = res.data.data.page >= res.data.data.pages;
        this.isDirector = res.data.data.isDirector;
        let temp = res.data.data.list;
        //console.log(JSON.stringify(temp));
        if (temp.length > 0) {
          temp.forEach(element => {
            let material = {
              id: null,
              content: null,
              title: null,
              imgs: [],
              num: 1,
              addTime: null
            };
            material.id = element.id;
            material.content = element.des;
            material.title = element.title;
            material.addTime = element.addTime;
            material.imgs = element.imgUrl;
            material.displayWay = element.displayWay;
            material.url = element.url;
            //alert(element.imgUrl.length);
            if (element.imgUrl.length <= 3) {
              material.num = element.imgUrl.length;
            } else if (element.imgUrl.length == 4) {
              material.num = 2;
            } else if (element.imgUrl.length > 4) {
              material.num = 3;
            }
            this.materialList.push(material);
          });
        }
        // alert(JSON.stringify(this.materialList));
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../../assets/scss/mixin';

/deep/ .van-grid-item__content {
  padding: 2px;
}

.squareClass3 {
  width: 33%;
}

.squareClass6 {
  width: 66%;
}

.view-router {
  background: white;
}
.material {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 6px;
  background-color: #fff;
}

.material .van-cell {
  padding: 10px 0px;
}

.wz_out {
  background: #f7f7f7;
  font-size: 14px;
  margin: 4px 0px 4px 12px;
  width: calc(100% - 12px);
}

.wz_out span {
  color: #101010;
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}

.user_avatar {
  margin-bottom: 10px;
  img {
    border: 0;
    border-radius: 6px;
  }
  width: 40px;
}

.title-ma {
  display: flex;
  height: 44px;
  align-items: center;
  justify-content: left;
  padding-left: 22px;
  color: #fff;
  background: #ee3f00 100%;
}

.parent p {
  margin-left: 20px;
  font-size: 0.8rem;
  color: gray;
}

.content {
  font-size: 0.9rem;
  color: gray;
}

.footer-row {
  margin-top: 20px;
}

.parent img {
  vertical-align: middle;
}

.van-cell {
  padding-left: 0px;
  line-height: normal;
}
</style>

